<template>
    <div class="layout_header header">
        <div class="center">
            <div class="head_top">
                <div class="name">
                    <h1 class="cn">广东省中山市质量计量监督检测所</h1>
                    <h2 class="en">Guangdong Zhongshan Supervision Testing Institute of Quality & Metrology</h2>
                </div>
                <div class="head_search">
                    <div class="search">
                        <el-input v-model="searchInput" placeholder="请输入新闻关键词" class="i">
                            <i class="el-input__icon el-icon-search" slot="suffix" @click="handleIconClick(searchInput)"> </i>
                        </el-input>
                    </div>
                </div>
                <div class="head_tel">
                    <div class="icon">
                        <i class="iconfont icon-dianhua2"></i>
                    </div>
                    <div class="txt">
                        <p>质检业务热线：<a href="tel:0760-88307614" title="质检业务热线">0760-88307614</a></p>
                        <p>计量业务热线：<a href="tel:0760-88307614" title="计量业务热线：">0760-88321709</a></p>
                        <p>灯具业务热线：<a href="tel:0760-88307614" title="灯具业务热线：">0760-88162830</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="head_monu" id="head_menu_active" :style="navbgclolr">
            <div class="center">
                <ul class="flex">
                    <!-- :style="[navLibgclolr,item.href == $route.path ? accivecolr : '']" -->
                    <li class="black" :class="[{ active: item.href == $route.path }]" :style="[item.href == '/column' && item.active ? accivecolr : '']" v-for="(item, li) in navList" :key="li" @mouseenter="handleMouseEnter(item, li)" @mouseleave="handleMouseLeave(item, li)" @click="handleClick(item, li)">
                        <router-link :to="item.href"> {{ item.title }}</router-link>
                        <div class="drop_monu" :class="[isnavhow ? `drop_menu${li}` : '']" :ref="`drop_menu${li}`" v-if="item.childrens.length != 0">
                            <div class="flex flex_row_justify">
                                <div class="left">
                                    <ul v-for="(list, i) in item.childrens" :key="i">
                                        <a :class="[{ active: list.active }]" :style="redAcolor" :title="list.title">
                                            <li @mouseenter.stop="handleliMouse(list)" @mouseleave.stop="handleleaveliMouse(list)" @click.stop="handleliClick(list, i)">{{ list.title }}</li>
                                        </a>
                                    </ul>
                                </div>
                                <div class="right">
                                    <div class="box active">
                                        <div class="img">
                                            <div class="picture_container">
                                                <img :src="rederNavRight.bgPic" :alt="rederNavRight.title" :title="rederNavRight.title" />
                                            </div>
                                        </div>
                                        <div class="txt" :style="redAcolor">
                                            <p class="title">{{ rederNavRight.title }}</p>
                                            <p class="abstract">{{ rederNavRight.abstr }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import { config } from '@/common/config.js';
//事件总线
import { EventBus } from '../utils/event-bus.js'
export default {
    name: 'MainHeader',
    created() {
        require('@/styles/index.scss');
        require('@/styles/reset.scss');
    },
    data() {
        return {
            rederNavRight: {
                bgPic: '',
                txt: '',
                abstr: '',
                img: '',
            },
            isnavhow: true,
            input: '',
            navList: [
                {
                    title: '首页',
                    href: '/home',
                    active: false,
                    childrens: [],
                },
                {
                    title: '服务项目',
                    href: '/service',
                    active: false,
                    childrens: [],
                },
                {
                    title: '新闻资讯',
                    href: '/news',
                    active: false,
                    childrens: [],
                },
                // {
                //   title: "采购咨询",
                //   href: "/consult",
                //   active: false,
                //   childrens: []
                // },
                {
                    title: '关于我们',
                    href: '/about',
                    active: false,
                    childrens: [],
                },
                {
                    title: '国家中心及省站',
                    href: '/nation',
                    active: false,
                    childrens: [],
                },
                // {
                //     title: '党建专栏',
                //     href: '/column',
                //     active: false,
                //     childrens: [],
                // },
                {
                    title: '联系我们',
                    href: '/contact',
                    active: false,
                    childrens: [],
                },
            ],

            searchInput: '',
            current: {
                theme: 'blue',
            },
            navbgclolr: {},
            navLibgclolr: {},
            redAcolor: {},
            accivecolr: {
                borderLeft: ' 1px solid rgb(174, 7, 7)',
                borderRight: ' 1px solid rgb(174, 7, 7)',
                backgroundColor: 'rgb(93 5 5)',
                borderRight: '1px solid rgb(174, 7, 7)',
                boxShadow: 'inset -1px 0 0 0 #ae0707',
            },
        };
    },
    watch: {
        '$route.path': function (val) {
            if (val == '/column') {
                localStorage.setItem('theme', 'red');
                this.current.theme = 'red';
                this.navbgclolr = {
                    backgroundColor: '#a92020',
                };
                this.redAcolor = {
                    color: 'white !important',
                };
                document.getElementById('head_menu_active').classList.add('actviveRed');
            } else {
                localStorage.removeItem('theme');
                this.navbgclolr = {};
                this.redAcolor = {};
                document.getElementById('head_menu_active').classList.remove('actviveRed');
            }
        },
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            let theme = localStorage.getItem('theme');

            if (theme == 'red') {
                this.navbgclolr = {
                    backgroundColor: '#a92020',
                };
                document.getElementById('head_menu_active').classList.add('actviveRed');
            } else {
                this.navbgclolr = {};
                document.getElementById('head_menu_active').classList.remove('actviveRed');
            }

            // 获取服务项目树
            this.getserviceTree();
            this.navList[0].active = true;
        },
        previewPic(code) {
            return config.url + config.prefix + '/file/previewFile?code=' + code;
        },
        getserviceTree() {
            let params = {
                tenantId: 1,
                id: 3,
            };
            // 获取产品树
            this.$http.get(this.$api.serveItemApi.listPlateCatAndChildren, params).then((res) => {
                if (res.code == 200) {
                    let result = [];
                    const objArray = res.data;
                    if (objArray.length > 0) {
                        for (let [index, item] of objArray.entries()) {
                            let detail = {};
                            detail.id = item.id;
                            detail.title = item.title;
                            detail.abstr = item.intro;
                            detail.bgPic = this.previewPic(item.bgPic);
                            if (index == 0) {
                                detail.active = true;
                            } else {
                                detail.active = false;
                            }
                            result.push(detail);
                        }
                    }
                    for (let item of this.navList) {
                        if (item.title == '服务项目') {
                            item.childrens = result;
                            this.handleliMouse(result[0]);
                        }
                    }
                }
            });
        },
        handleClick(data, index) {
            this.searchInput = '';
            this.navList.forEach((item) => {
                if (item.title == data.title) {
                    item.active = true;
                } else {
                    item.active = false;
                }
            });
        },
        handleMouseEnter(data, index) {
            if (data.childrens.length == 0) return;
            let { abstr, active, bgPic, id, title } = this.navList[1].childrens[0];
            this.rederNavRight.abstr = abstr;
            this.rederNavRight.bgPic = bgPic;
            this.rederNavRight.title = title;
            const menuItem = this.$refs[`drop_menu${index}`][0];
            menuItem.classList.add('active');
        },
        handleMouseLeave(data, index) {
            if (data.childrens.length == 0) return;
            const menuItem = this.$refs[`drop_menu${index}`][0];
            menuItem.classList.remove('active');
        },
        //处理li列表的滑入事件
        handleliMouse(data) {
            let { abstr, bgPic, img, title, active } = data;
            this.rederNavRight.abstr = abstr;
            this.rederNavRight.bgPic = bgPic;
            this.rederNavRight.img = img;
            this.rederNavRight.title = title;
            for (let item of this.navList) {
                if (item.title == '服务项目') {
                    item.childrens.forEach((li) => {
                        if (li.title == title) {
                            li.active = true;
                        } else {
                            li.active = false;
                        }
                    });
                }
            }
        },
        handleleaveliMouse(data) {},
        // li跳转
        handleliClick(data, index) {
            this.$router.push({
                path: `/service`,
                query: {
                    title: data.title,
                    index: index,
                },
            });
        },
        // 搜索
        handleIconClick(content) {
            let currentPath = this.$route.path;
           
            let data = JSON.stringify(   {
                type: 'search',
                title: content,
            }  )
            // if (currentPath != '/news') {
                this.$router.push({
                    path: `/news`,
                    query: {
                        data,
                    },
                });
        // }else{
        //         console.log('newsnews', data);
            
        //     EventBus.$emit('eventName', data);
        // }
        },
    },
};
</script>

<style lang="scss" scoped>
/**header 高 */
// $--header-height: 170px;

* {
    box-sizing: border-box;
}

.center {
    width: 1200px;
    margin: 0 auto;
}

.head_top {
    height: 120px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    -webkit-box-align: center;

    .name {
        .cn {
            font-size: 30px;
            line-height: 30px;
            letter-spacing: 1px;
            color: #172029;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .en {
            font-size: 12px;
            line-height: 12px;
            letter-spacing: 0;
            color: #666666;
        }
    }

    .head_tel {
        display: flex;
        align-items: center;

        .txt p {
            line-height: 14px;
            letter-spacing: 0;
            color: #666666;
            display: flex;
        }

        .txt p a {
            font-size: 18px;
            line-height: 18px;
            font-weight: 600;
            letter-spacing: 1px;
            color: #464646;
            text-decoration-line: none;
        }

        .icon {
            width: 42px;
            height: 42px;
            border: solid 1px #d2d2d2;
            border-radius: 50%;
            line-height: 42px;
            text-align: center;
            margin-right: 30px;
        }
    }

    .head_search {
        .search {
            display: flex;
            align-items: center;
        }

        ::v-deep input {
            width: 100%;
            height: 36px;
            border-radius: 18px;
            border: solid 1px #e5e5e5;
            font-size: 12px;
            line-height: 35px;
            letter-spacing: 1px;
            color: #999999;
            padding-left: 15px;
            padding-right: 45px;
        }
    }
}

.picture_container {
    position: relative;
    overflow: hidden;
    background: none;
}

.header .head_monu .black .drop_monu.active,
.header .head_monu .footer .footer_top .about .drop_monu.active,
.footer .footer_top .header .head_monu .about .drop_monu.active {
    opacity: 1;
    height: 225px;
}

.header .head_monu {
    height: 50px;
    background-color: #1f6cc1;
}

.header .head_monu .black:nth-of-type(1) {
    border-left: 1px solid #044fa2;
    box-shadow: -1px 0 0 0 #2c7dd6 inset, -1px 0 0 0 #2c7dd6;
}

.header .actviveRed .black:hover {
    border-left: 1px solid rgb(174, 7, 7);
    border-right: 1px solid rgb(174, 7, 7);
    background-color: rgb(93, 5, 5);
    box-shadow: rgb(174, 7, 7) -1px 0px 0px 0px inset;
}

.header .actviveRed .active {
    // border-left: 1px solid rgb(174, 7, 7) !important;
    // border-right: 1px solid rgb(174, 7, 7) !important;
    background-color: rgb(93, 5, 5) !important;
    // box-shadow: rgb(174, 7, 7) -1px 0px 0px 0px inset !important;
}

.header .actviveRed .black {
    border-right: 1px solid rgb(174, 7, 7) !important;
    border-left: 1px solid rgb(174, 7, 7) !important;
    box-shadow: -1px 0 0 0 rgb(235 56 56) inset, -1px 0 0 0 rgb(143 19 19) !important;
}
</style>
